<template>
	<view class="service">
		 <!-- :style="{'background': 'url('+url+') no-repeat'}" -->
		 <image class="bj" :src="url"></image>
		<view class="top">
			<image :src="avatar" style="margin-right: 20rpx;"></image>
			<view class="right">
				<view class="title alpsoftjurnal" :class="lang == 'wwe'?'small':''">
					{{ $t('service.title')}}
				</view>
				<view class="text alpsoftjurnal" :class="lang == 'wwe'?'small':''">
					{{ $t('service.title2')}}
				</view>
			</view>
		</view>
		<view class="cont">
			<image class="code"  @click.self="previewImage" show-menu-by-longpress="true" :src="service"></image>
			<view class="button alpsoftjurnal">
				{{$t('service.button')}}
			</view>
		</view>
		<view class="text-bottom">
			<view class="alpsoftjurnal">
					{{ $t('service.text1')}}
			</view>
			<view class="alpsoftjurnal">
					{{ $t('service.text2')}}
			</view>
			<view class="alpsoftjurnal">
					{{ $t('service.text3')}}
			</view>
		</view>
	</view>
</template>

<script>
import util from '../../../utils/util'
	export default {
		data() {
			return {
				url: this.$config.staticUrl + 'servicebj.png',
				url2: this.$config.staticUrl + 'servicebutton.png',
				service: '',
				avatar: '',
				lang: ''
			}
		},
		onLoad() {
			this.lang = uni.getStorageSync('language')
			this.serviceInfo()
			this.avatar = uni.getStorageSync('avatar')
			util.setNavTitle()
		},
		methods: {
			serviceInfo() {
				uni.request({
					url: this.configs.webUrl + '/api/index/serviceInfo',
					success: res => {
						console.log(res);
						this.service = res.data.data
					}
				})
			},
			previewImage(e) {
					uni.previewImage({
						// 需要预览的图片链接列表。若无需预览，可以注释urls
						urls: [e.target.src],
						// 为当前显示图片的链接/索引值
						current: e.target.src,
						// 图片指示器样式	
						indicator: 'default',
						// 是否可循环预览
						loop: false,
						// 长按图片显示操作菜单，如不填默认为保存相册
						longPressActions: {
							itemList: [this.l('发送给朋友'), this.l]
						},
						success: res => {
							console.log('previewImage res', res);
						},
						fail: err => {
							console.log('previewImage err', err);
						}
					});
				},
		}
	}
</script>

<style>
	page, view {
		font-size: initial;
	}
</style>
<style lang="scss" scoped>
	.service {
		width: 100%;
		height: 100vh;
		.bj {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
		}
		.top {
			position: absolute;
			left: 10%;
			top: 10%;
			width: 80%;
			
			display: flex;
			align-items: center;
			image {
				width: 154rpx;
				height: 154rpx;
				border-radius: 50%;
			}
			.right {
				width: calc(100% - 164rpx);
			}
			.title {
				font-size: 48rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 600;
				color: #FFFFFF;
				margin-bottom: 10rpx;
			}
			.text {
				font-size: 42rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 600;
				color: #FFFF57;
			}
			.small {
				font-size: 31rpx;
			}
		}
		.cont {
			width: 80%;
			position: absolute;
			left: 10%;
			top: 30.5%;
			text-align: center;
			.code {
				height: 35vh;
				width: 75%;
				border-radius: 20rpx;
				margin: 0 auto;
			}
			.button {
				width: 80%;
				min-height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 0 auto;
				background: linear-gradient(180deg, #FFC527 0%, #FFF258 100%);
				box-shadow: 0rpx 6rpx 0rpx 2rpx #F0B437, inset 0rpx -2rpx 0rpx 2rpx #FFFBA8;
				border-radius: 58rpx 58rpx 58rpx 58rpx;
				font-size: 42rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 600;
				color: #AD0D00;
			}
		}
		.text-bottom {
			position: absolute;
			left: 20%;
			top: 75%;
			width: 60%;
			view {
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 600;
				color: #FFFFFF;
				line-height: 56rpx;
			}
		}
	}
</style>